<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>canvas 画图板</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/index.js"></script>
	</head>
	<body>
		<!-- 本期视频不写样式 只为实现最后的画图效果 -->
		<div class="container">
			<div class="options">
				<label>画笔颜色</label>
				<!-- value值可以设置默认的颜色 -->
				<input type="color" value="#7788ff" id="color" />
			</div>
			<div class="options">
				<label>画笔粗细</label>
				<!-- value同样设置默认的值 -->
				<!-- min为最小取值 -->
				<!-- max为最大取值 -->
				<input type="range" value="5" min="1" max="50" id="range" />
			</div>
			<div class="options">
				<button id="clear">清空画布</button>
			</div>
			<canvas width="1000" height="500"></canvas>
		</div>
	</body>
</html>
